<template>
  <div class="sign-up" @click="$refs.verify.show = false">
    <div style="height: 50px"></div>
    <div class="logo-box">
      <img width="150" :src="$store.state.logoImg" @click="$router.push('/')" />
      <div v-if="reginer == 'writer'">写手注册</div>
      <div v-else>用户注册</div>

    </div>
    <div class="login-container">
      <!-- 注册 -->
      <Form ref="formRegis" :model="formRegis" :label-width="90" :rules="ruleInline" style="width: 350px">
        <FormItem prop="username" label="账号">
          <i-input type="text" v-model="formRegis.username" clearable placeholder="请输入账号" />
          <!-- <Icon type="md-person" slot="prepend"></Icon> -->
          <!-- </i-input> -->
        </FormItem>
        <FormItem prop="password" label="密码">
          <i-input type="password" v-model="formRegis.password" clearable placeholder="请输入大于6位密码" />
          <!-- <Icon type="md-lock" slot="prepend"> </Icon> -->
          <!-- </i-input> -->
        </FormItem>
        <FormItem prop="phone" label="手机号">
          <i-input type="text" v-model="formRegis.phone" clearable placeholder="请输入手机号" />
        </FormItem>
        <FormItem prop="code" label="验证码">
          <i-input type="text" v-model="formRegis.code" clearable placeholder="手机验证码">
            <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
          </i-input>
        </FormItem>
        <FormItem prop="proceedsType" label="收款方式" v-if="reginer == 'writer'">
          <!-- prefix="logo-usd"  -->
          <Select v-model="formRegis.proceedsType" @on-change="clickTypeFun" placeholder="请选择收款方式">
            <Option value="微信">微信</Option>
            <Option value="支付宝">支付宝</Option>
            <Option value="银行卡">银行卡</Option>
          </Select>
        </FormItem>
        <div v-if="reginer == 'writer' && formRegis.proceedsType">
          <FormItem prop="proceedsName" label="收款人姓名">
            <i-input type="text" v-model="formRegis.proceedsName" clearable placeholder="请输入收款人姓名" />
            <!-- <Icon type="ios-bowtie" slot="prepend"> </Icon> -->
            <!-- </i-input> -->
          </FormItem>
          <FormItem prop="proceedsPhone" label="手机号" v-if="formRegis.proceedsType == '微信'">
            <i-input type="text" v-model="formRegis.proceedsPhone" clearable placeholder="请输入微信绑定手机号" />
          </FormItem>
          <FormItem prop="proceedsPhone" label="手机号" v-if="formRegis.proceedsType == '支付宝'">
            <i-input type="text" v-model="formRegis.proceedsPhone" clearable placeholder="请输入支付宝手机号" />
          </FormItem>
          <FormItem prop="bankCardNumber" label="银行卡号" v-if="formRegis.proceedsType == '银行卡'">
            <i-input type="text" v-model="formRegis.bankCardNumber" clearable placeholder="请输入银行卡号" />
          </FormItem>
        </div>
        <!-- <FormItem>
          <Button @click="verifyBtnClick" long :type="verifyStatus ? 'success' : 'default'">{{ verifyStatus ? "验证通过" :
            "点击完成安全验证" 1371992704333905920}}</Button>
        </FormItem> -->
        <FormItem>
          <Checkbox v-model="single"><span class="color999">点击注册，表示您同意《
              <span style="color: #61afef;" @click="agreement = true; getDetail()">平台用户协议</span>
              》</span></Checkbox>
          <!-- <router-link
           to="/article?id=1" target="_blank"></router-link> -->
        </FormItem>
        <FormItem>
          <Button type="error" size="large" @click="handleRegist" long>注册</Button>
        </FormItem>
      </Form>
      <!-- 拼图验证码 -->
      <Verify ref="verify" class="verify-con" :verifyType="verifyType" @change="verifyChange"></Verify>
      <div class="login-btn">
        已有账号？<a @click="$router.push('login')">立即登录</a>
      </div>
    </div>
    <div class="foot">
      <!-- <Row type="flex" justify="space-around" class="help">
        <router-link to="/article" class="item" target="_blank"
          >帮助</router-link
        >
        <router-link
          to="/article?id=1371779927900160000"
          class="item"
          target="_blank"
          >隐私</router-link
        >
        <router-link
          to="/article?id=1371992704333905920"
          class="item"
          target="_blank"
          >条款</router-link
        >
      </Row> -->
      <Row type="flex" justify="center" class="copyright">
        Copyright © {{ year }} - Present
        <a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">写稿平台</a>
        版权所有
      </Row>
    </div>
    <Modal v-model="modal" fullscreen :closable="false" :footer-hide="true">
      <div class="modal">
        <div class="modal_left" @click="userClick('user')">
          <svg t="1741769953957" class="icon" viewBox="0 0 1079 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4239" width="120" height="120">
            <path
              d="M922.624 784.384V901.12c0 41.984-33.792 76.8-76.8 76.8H76.8c-41.984 0-76.8-34.816-76.8-76.8V323.584c0-41.984 33.792-76.8 76.8-76.8H845.824c41.984 0 76.8 34.816 76.8 76.8v460.8zM616.448 429.056c-49.152 0-89.088 40.96-89.088 90.112 0 49.152 39.936 90.112 89.088 90.112 49.152 0 89.088-40.96 89.088-90.112 0-49.152-39.936-90.112-89.088-90.112z m2.048 403.456c177.152 0 176.128 0 176.128-22.528 0-83.968-58.368-156.672-141.312-174.08l-18.432 17.408h4.096l17.408 90.112c2.048 12.288-2.048 29.696-11.264 38.912l-27.648 28.672-29.696-28.672c-9.216-8.192-14.336-25.6-12.288-37.888l17.408-90.112h4.096L579.584 634.88c-80.896 17.408-141.312 89.088-141.312 175.104 0 22.528 3.072 22.528 180.224 22.528zM125.952 662.528c0 15.36 14.336 25.6 29.696 25.6H293.888c15.36 0 27.648-12.288 27.648-27.648 0-15.36-12.288-27.648-27.648-27.648H154.624c-15.36 1.024-28.672 14.336-28.672 29.696z m0-117.76c0 15.36 13.312 27.648 27.648 27.648h318.464c14.336 0 26.624-12.288 26.624-27.648 0-15.36-12.288-27.648-26.624-27.648H153.6c-14.336 0-27.648 11.264-27.648 27.648z m0-113.664c0 15.36 13.312 25.6 28.672 25.6h245.76c15.36 0 27.648-11.264 27.648-26.624s-12.288-26.624-27.648-26.624h-245.76c-15.36 0-28.672 12.288-28.672 27.648z m0 0"
              fill="#ff3c2a" p-id="4240"></path>
            <path
              d="M994.304 46.08h-768c-41.984 0-79.872 55.296-79.872 98.304v57.344h758.784c41.984 0 69.632 40.96 69.632 82.944v539.648h20.48c41.984 0 83.968-59.392 83.968-102.4V144.384c-1.024-43.008-41.984-98.304-84.992-98.304z m0 0"
              fill="#ff3c2a" p-id="4241"></path>
          </svg>
          <div>用户</div>
        </div>
        <div class="modal_right" @click="userClick('writer')">
          <svg t="1741769847307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1468" width="120" height="120">
            <path
              d="M262.826667 701.44c12.8 0 24.746667 3.413333 36.693333 10.24 3.413333-18.773333 0.853333-29.013333-4.266667-33.28L238.933333 704.853333c7.68-2.56 16.213333-3.413333 23.893334-3.413333z m600.746666-34.986667c-102.4 56.32-158.72 17.92-158.72 17.92-28.16 29.866667-120.32 34.133333-150.186666 32.426667-30.72-1.706667-66.56-32.426667-66.56-32.426667l-50.346667 16.213334-76.8 50.346666c-9.386667-4.266667-17.92-7.68-24.746667-10.24l81.92-43.52 7.68 6.826667 16.213334-17.066667-1.706667-1.706666 2.56-1.706667-62.293333-55.466667c3.413333 0.853333 6.826667 0.853333 10.24 0.853334 17.066667 6.826667 41.813333 20.48 56.32 52.053333l15.36-17.066667c-17.92-13.653333-25.6-29.013333-25.6-29.013333 0.853333-19.626667-3.413333-28.16 50.346666-81.92 29.866667-29.866667 81.92-34.133333 110.933334-34.133333L904.533333 192.853333c12.8-88.746667-72.533333-58.88-72.533333-58.88L398.506667 607.573333l-27.306667 11.093334s69.973333-75.946667 144.213333-157.013334c25.6-28.16 15.36-45.226667 39.253334-71.68 10.24-11.093333 57.173333-33.28 66.56-43.52 39.253333-42.666667 67.413333-73.386667 67.413333-73.386666-41.813333-17.066667-75.093333-30.72-79.36-30.72-6.826667 0-120.32 30.72-179.2 131.413333-52.906667 168.106667-81.92 210.773333-81.92 210.773333 5.12 12.8 13.653333 36.693333 31.573333 42.666667l-9.386666 17.92c-1.706667 0-3.413333 0-5.12 0.853333l3.413333 3.413334-44.373333 85.333333c-49.493333-20.48-37.546667-15.36-64.853334-22.186667 2.56 5.973333 3.413333 10.24 3.413334 13.653334 0 3.413333-1.706667 5.12-5.973334 5.12-11.093333 0.853333-20.48 4.266667-28.16 10.24-1.706667 5.12-2.56 8.533333-5.12 8.533333-1.706667 0-3.413333-0.853333-5.12-3.413333-2.56 0.853333-5.973333 16.213333-23.04 18.773333-69.973333 10.24-11.946667-46.08-22.186666-27.306667l66.56-32.426666c-1.706667 0.853333-3.413333 0.853333-5.12 1.706666v-3.413333c-3.413333 2.56 44.373333-40.106667 61.44-25.6l16.213333-7.68c-3.413333 0.853333-2.56 0 0 0h0.853333l12.8-5.973333c5.973333-4.266667 23.893333-15.36 23.893334-11.946667l-25.6 11.093333c-1.706667 0.853333-2.56 1.706667-0.853334 0.853334-5.973333 2.56-9.386667 4.266667-11.946666 5.12h-0.853334c4.266667 0 11.093333 1.706667 11.093334 15.36 0 0.853333-0.853333 3.413333-1.706667 6.826666-1.706667 3.413333-2.56 6.826667-2.56 8.533334 0 2.56-0.853333 5.973333-0.853333 10.24v0.853333l37.546666-61.44-17.066666-32.426667s-10.24-0.853333-17.066667-32.426666c-6.826667-31.573333 17.066667-48.64 17.066667-48.64l17.066666-48.64 8.533334-32.426667h-204.8c-23.04 0-44.373333 12.8-55.466667 33.28L30.72 800.426667c-10.24 40.106667 7.68 95.573333 55.466667 95.573333h752.64c47.786667 0 65.706667-59.733333 55.466666-95.573333l-30.72-133.973334z m-631.466666 52.906667c4.266667-1.706667 7.68-2.56 11.946666-2.56l5.12 0.853333c2.56 0 4.266667-1.706667 6.826667-5.973333-4.266667-0.853333-7.68-1.706667-11.946667-1.706667-4.266667 0-7.68 0.853333-10.24 1.706667-0.853333 3.413333-0.853333 5.12-1.706666 7.68z m699.733333-356.693333c-17.066667 9.386667-56.32-9.386667-56.32-9.386667s-31.573333-13.653333-72.533333-31.573333L710.826667 423.253333c-3.413333 32.426667-26.453333 72.533333-74.24 104.106667-18.773333 0.853333-35.84 3.413333-52.053334 7.68l-70.826666 27.306667c-41.813333 24.746667-62.293333 54.613333-52.906667 69.973333 16.213333 26.453333 121.173333 55.466667 164.693333 47.786667 41.813333-6.826667 98.986667-20.48 127.146667-18.773334 50.346667 1.706667 116.906667-18.773333 157.866667-50.346666 102.4-32.426667 44.373333-261.12 21.333333-248.32zM520.533333 651.093333c-4.266667 0 17.066667-17.92 17.066667-40.96s-21.333333-40.96-17.066667-40.96 33.28 17.92 33.28 40.96-28.16 40.96-33.28 40.96z m460.8-304.64h-31.573333c84.48 209.92-16.213333 274.773333 0 295.253334 16.213333 19.626667 0 46.933333 0 46.933333l23.04-15.36c77.653333-157.013333 8.533333-326.826667 8.533333-326.826667z"
              fill="#ff3c2a" p-id="1469" data-spm-anchor-id="a313x.search_index.0.i0.3c713a81D1XFiG" class="selected">
            </path>
          </svg>
          <div>写手</div>
        </div>
      </div>
    </Modal>
    <Modal v-model="agreement" title="隐私协议" width="70%" @on-close="agreement = false">
      <transition mode="out-in">
        <div style="max-height: 600px;overflow-y: auto;">
          <h2 class="mt_10 mb_10">{{ detail.title }}</h2>
          <div class="mt_10 mb_10" v-html="detail.content"></div>
          <Checkbox v-model="single">我已认真阅读并勾选《
            <span style="color: #61afef;" @click="agreement = true; getDetail()">平台用户协议</span>
            》
          </Checkbox>
        </div>
      </transition>
      <div slot="footer">
        <Button @click="agreement = false">取消</Button>
        <Button style="background-color: #ff5343;color: #fff;" @click="agreement = false">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as RegExp from "@/plugins/RegExp.js";
import { md5 } from "@/plugins/md5.js";
import * as apiLogin from "@/api/login.js";
import { sendSms } from "@/api/common.js";
import Verify from "@/components/verify";
import { v4 as uuidv4 } from 'uuid';
import { writerConfig } from '@/api/common.js'
export default {
  name: "SignUp",
  components: { Verify },
  data() {
    return {
      config: require("@/config"),
      year: new Date().getFullYear(),
      formRegis: {
        // 注册表单
        phone: "",
        code: "",
        username: "",
        password: "",
        proceedsType: null,
        proceedsName: "",
        proceedsPhone: "",
        bankCardNumber: "",
      },
      ruleInline: {
        // 验证规则
        username: [{ required: true, message: "请输入用户名" }],
        proceedsName: [{ required: true, message: "请输入收款人姓名" }],
        proceedsType: [{ required: true, message: "请选择收款方式" }],
        password: [
          { required: true, message: "请输入密码" },
          { type: "string", min: 6, message: "密码不能少于6位" },
        ],
        proceedsPhone: [
          { required: true, message: "请输入手机号码" },
          {
            pattern: RegExp.mobile,
            trigger: "blur",
            message: "请输入正确的手机号",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号码" },
          {
            pattern: RegExp.mobile,
            trigger: "blur",
            message: "请输入正确的手机号",
          },
        ],
        bankCardNumber: [
          { required: true, message: "请输入银行卡号" },
          {
            pattern: /^\d{16,19}$/,
            trigger: "blur",
            message: "请输入正确的银行卡号",
          },
        ],
        code: [{ required: true, message: "请输入手机验证码" }],
      },
      verifyStatus: false, // 是否验证通过
      verifyType: "REGISTER", // 验证状态
      codeMsg: "发送验证码", // 提示文字
      interval: "", // 定时器
      time: 60, // 倒计时
      modal: false,
      single: false,//协议选框
      detail: {},
      agreement: false,
    };
  },
  methods: {
    // 注册
    handleRegist() {
      if (!this.single) {
        this.$Message.warning("请先勾选协议");
        return;
      }
      this.$refs.formRegis.validate((valid) => {
        if (valid) {
          if (this.formRegis.proceedsType == 2) {
            this.formRegis.proceedsPhone = this.formRegis.bankCardNumber
          }
          const {
            bankCardNumber,
            ...data
          } = this.formRegis;
          data.uuid = uuidv4();

          // let data = JSON.parse(JSON.stringify(this.formRegis));
          // data.password = md5(data.password);

          apiLogin.regist({
            ...data,
            roleId: this.reginer == 'writer' ? 101 : 102
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success("注册成功!");
              this.$router.push("login");
            } else {
              this.$Message.warning(res.msg);
            }
          });
        } else {
        }
      });
    },
    // 发送短信验证码
    sendCode() {
      if (this.time === 60) {
        if (this.formRegis.phone === "") {
          this.$Message.warning("请先填写手机号");
          return;
        }
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (phoneRegex.test(this.formRegis.phone)) {
          let params = {
            phone: this.formRegis.phone,
            // verificationEnums: "REGISTER",
          };
          sendSms(params).then((res) => {
            if (res.code == 200) {
              this.$Message.success("验证码发送成功");
              this.formRegis.code = res.data+'';
              let that = this;
              this.interval = setInterval(() => {
                that.time--;
                if (that.time === 0) {
                  that.time = 60;
                  that.codeMsg = "重新发送";
                  that.verifyStatus = false;
                  clearInterval(that.interval);
                } else {
                  that.codeMsg = that.time;
                }
              }, 1000);
            } else {
              this.$Message.warning(res.msg);
            }
          });

        } else {
          this.$Message.warning("手机号格式错误");
        }
        // if (!this.verifyStatus) {
        //   this.$Message.warning("请先完成安全验证");
        //   return;
        // }
      }
    },
    // 图片验证码成功回调
    verifyChange(con) {
      if (!con.status) return;
      this.$refs.verify.show = false;
      this.verifyStatus = true;
    },
    // 打开图片验证码
    verifyBtnClick() {
      if (!this.verifyStatus) {
        this.$refs.verify.init();
      }
    },
    // 用户选择
    userClick(val) {
      this.$router.push({
        path: "/signUp",
        query: {
          reginer: val,
        },
      });
      location.reload()
    },
    //下拉切换
    clickTypeFun(val) {

    },
    async getDetail() { // 文章详情
      await writerConfig().then(res => {
        if (res.code == 200) {
          this.detail = res.data[0]
        }
      })
    }
  },
  mounted() {
    this.$refs.formRegis.resetFields();
    document.querySelector(".sign-up").style.height = window.innerHeight + "px";

  },
  created() {
    this.reginer = this.$route.query.reginer;
    console.log(this.reginer, "this.reginer");

    if (this.$route.query.reginer == undefined || this.$route.query.reginer == null || this.$route.query.reginer == "") {
      this.modal = true;
    } else {
      this.modal = false;
    }
  }
};
</script>
<style scoped lang="scss">
.logo-box {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;

  img {
    width: 150px;
    cursor: pointer;
  }

  div {
    font-size: 20px;
    margin-top: 10px;
  }
}

.login-container {
  border-top: 2px solid $theme_color;
  position: relative;
  margin: 0 auto;
  width: 600px;
  background-color: #fff;
  padding: 20px 110px;

  .login-btn {
    position: absolute;
    right: 20px;
    top: -45px;
  }
}

.verify-con {
  position: absolute;
  left: 140px;
  top: 80px;
  z-index: 10;
}

.other-login {
  margin: 0 auto;

  .ivu-icon {
    font-size: 24px;
  }
}

.regist {
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;

  span {
    margin-left: 10px;

    &:hover {
      cursor: pointer;
      color: $theme_color;
    }
  }
}

.foot {
  position: fixed;
  bottom: 4vh;
  width: 368px;
  left: calc(50% - 184px);
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;

  .help {
    margin: 0 auto;
    margin-bottom: 1vh;
    width: 60%;

    .item {
      color: rgba(0, 0, 0, 0.45);
    }

    :hover {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .modal_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    color: #ff3c2a;
    font-size: 20px;
    border-right: 1px solid #a8a7a7b7;
    cursor: pointer;
  }

  .modal_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    color: #ff3c2a;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
